<template>
  <div id="hosp">
    <div class="header">
      <div class="font">
        <i class="el-icon-coordinate">
          <span>上海市</span>
        </i>
        <br />
        <span>医疗救治定点医院和发热门诊一览</span>
      </div>
    </div>
    <div class="widthDiv">
      <el-input
        size="small"
        v-model="pageParam.name"
        placeholder="请输入内容"
        clearable
      ></el-input>
    </div>
    <el-button
      size="small"
      type="primary"
      icon="el-icon-search"
      @click="toSearch"
      >搜索</el-button
    >
    <div></div>
    <!-- {{ hospData }} -->
    <div
      class="main"
      @click="toJump(item)"
      v-for="(item, index) in hospData"
      :key="index"
    >
      <div class="main_left">
        <span class="index">{{ index + 1 }}</span
        >
        &nbsp;{{ item.name }}
        <span class="pca"
          >{{ item.province }}-{{ item.city }}-{{ item.area }}</span
        >
      </div>

      <div class="main_right">
        <i class="el-icon-location"></i
        >{{
          distanceTwo(
            currentPosition[0],
            currentPosition[1],
            item.longitude,
            item.latitude
          )
        }}km
      </div>
    </div>
    <div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParam.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "../utils/request.js";
export default {
  data() {
    return {
      currentPosition: [],
      hospData: [],
      ////
      categoryData: [],
      total: 0,
      tableData: [],
      // 分页查询的参数
      pageParam: {
        page: 1,
        pageSize: 10,
        title: "",
        categoryId: "",
        name: "",
      },
    };
  },
  computed: {},
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageParam.pageSize = val;
      this.pageQuery();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageParam.page = val;
      this.pageQuery();
    },
    // 跳转页面
    toJump(hospital) {
      // hospital
      //console.log(hospital);
      // 使用JS进行路由跳转页面
      // this.$router.push('/hospMap');
      this.$router.push({
        path: "/hospMap",
        query: {
          longitude: hospital.longitude,
          latitude: hospital.latitude,
          name: hospital.name,
        },
      });
    },
    //求距离
    distanceTwo(lng1, lat1, lng2, lat2) {
      var radLat1 = (lat1 * Math.PI) / 180.0;
      var radLat2 = (lat2 * Math.PI) / 180.0;
      var a = radLat1 - radLat2;
      var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137; // EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000;
      console.log("两地距离千米：", s);
      return s;
    },
    //   搜索
    toSearch() {
      this.pageParam.page = 1;
      this.pageQuery();
    },
    // 分页查找
    async pageQuery() {
      let res = await axios.get("/hospital/pageQuery", {
        params: this.pageParam,
      });
      this.hospData = res.data.list;
      this.total = res.data.total;
    },

    // 查找分类
    async findAllCategory() {
      let res = await axios.get("/hospital/pageQuery");
      this.categoryData = res.data;
    },
  },
  created() {
    this.pageQuery();
    this.currentPosition = [109.501845,24.305464];
    /* navigator.geolocation.getCurrentPosition(
      (data) => {
        console.log(data, "当前地理位置信息");
        this.currentPosition = [data.coords.longitude, data.coords.latitude];
      },
      (err) => {
        console.log(err);
      },
      {
        enableHighAccuracy: true, //高精度
        timeout: 5000, //超时时间
        maximumAge: 10000, //位置缓存时间
      }
    );
    this.findAllCategory(); */
  },
  mounted() {},
};
</script>
<style scoped>
#hosp {
  line-height: 60px;
  font-size: 20px;
}
.header {
  height: 150px;
  background-image: url(../assets/bg2.jpg);
  line-height: 60px;
  text-align: left;
  font-size: 24px;
  color: white;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
}
.font {
  float: left;
  margin-left: 20px;
}
.widthDiv {
  width: 200px;
  display: inline-block;
  margin-right: 10px;
  margin-top: 15px;
}
.main {
  font-size: 18px;
  height: 80px;
  background-color: rgba(255, 0, 0, 0.041);
  /*width:100%; */
}
.main :hover {
  font-size: 22px;
  color:rgb(119, 194, 255);
  /* background-color: turquoise; */
}
.main_left {
  float: left;
}
.main_left .index {
  width: 1.2em;
  background-color:rgb(119, 194, 255);
  color: #333;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 1.2em;
}
.main_left .pca {
  font-size: 16px;
  color: white;
  border-radius: 3px;
  background-color: #ffb34e;
}
.main_right {
  float: right;
}
</style>